<template>
  <div class="table-container">
    <slot></slot>
    <!-- table 表格 -->
    <div class="table" v-if="!fetching">
      <div class="table-header">
        <div class="table-row">
          <div
            class="table-col"
            v-for="(headerItem, index) in header"
            :class="bindTableHeaderItemStyle(headerItem, index)"
            :key="headerItem.name"
            :style="{}"
          >
            <div class="cell">{{ headerItem.name }}</div>
            <div
              class="types scroll-x hidden-bar border-top border-bottom"
              v-if="headerItem.types"
            >
              <div
                class="type-item cell"
                v-for="item in headerItem.types"
                :key="item"
              >
                {{ item }}
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="table-content">
        <div
          class="table-row border-bottom"
          v-for="(rowItem, index) in data"
          :key="rowItem.service"
          :class="bindTableRowItemStyle(rowItem, index)"
        >
          <!-- service -->
          <div class="col-start cell name">{{ rowItem.service }}</div>
          <!-- repair | city-->
          <div
            class="col-start cell name"
            v-if="rowItem.repair"
            v-html="textLayout(rowItem.repair)"
          ></div>
          <div class="col-start cell name" v-else>
            {{ rowItem.city }}
          </div>
          <!-- ariport -->
          <div class="flex-1 table-row scroll-x hidden-bar" style="flex: 5">
            <template v-if="judgeType(rowItem.airport) == 'array'">
              <div
                class="flex-1 cell"
                v-for="(item, index) in rowItem.airport"
                :key="index"
              >
                {{ item }}
              </div>
            </template>
            <div class="flex-1" v-else>
              <div class="table-row">
                <div class="cell flex-1">{{ rowItem.airport }}</div>
                <div class="table-col flex-3">
                  <div
                    class="table-row flex-1 airport-type-item border-bottom"
                    v-for="(airportTypeItem, index) in rowItem.airportType"
                    :key="index"
                    :class="[
                      index % 2 == 1 ? 'background' : 'background-white',
                    ]"
                  >
                    <div class="cell flex-1">{{ airportTypeItem.name }}</div>
                    <div class="table-col flex-1">
                      <div
                        class="starter-type-item border-bottom"
                        v-for="(
                          starterTypeItem, index
                        ) in airportTypeItem.starterType"
                        :key="index"
                      >
                        <div class="cell">{{ starterTypeItem }}</div>
                      </div>
                    </div>
                    <div class="col-end flex-1">
                      <div
                        class="mdi mdi-email-outline"
                        @click="consult(rowItem)"
                      ></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- airportType -->

          <!-- consult -->
          <div class="col-end name" v-if="!rowItem.airportType">
            <div @click="consult(rowItem)">
              <svg
                t="1726667603326"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="4440"
                width="16"
                height="16"
              >
                <path
                  d="M880.64 204.8h-737.28A61.44 61.44 0 0 0 81.92 265.0112v493.9776a61.44 61.44 0 0 0 18.0224 43.4176 59.8016 59.8016 0 0 0 41.7792 16.7936h737.28a61.44 61.44 0 0 0 61.44-61.44v-491.52A61.44 61.44 0 0 0 880.64 204.8z m0 573.44h-737.28a20.8896 20.8896 0 0 1-20.48-20.48V341.1968l358.8096 206.848a58.9824 58.9824 0 0 0 61.44 0L901.12 341.1968v417.792a20.48 20.48 0 0 1-20.48 19.2512zM901.12 294.0928l-378.88 218.7264a20.48 20.48 0 0 1-20.48 0L122.88 294.0928v-29.0816A20.48 20.48 0 0 1 143.36 245.76h737.28a20.48 20.48 0 0 1 20.48 20.48v26.624z"
                  p-id="4441"
                  fill="#36434D"
                ></path>
              </svg>
            </div>
          </div>
        </div>
      </div>
    </div>
    <template v-else>
      <div class="pc-skeleton">
        <Skeleton pc gap-skeleton block v-for="i in 8" :key="i"></Skeleton>
      </div>
      <div class="mobile-skeleton">
        <Skeleton mobile gap-skeleton block v-for="i in 5" :key="i"></Skeleton>
      </div>
    </template>
  </div>
</template>

<script setup lang="ts">
import { inject } from "vue";
import type { TableHeaderItem, TableRowItem } from "../../../types/table";

const fetching = inject("fetching");

const emits = defineEmits(["consult"]);
const consult = (data) => {
  let obj = {
    service_code: data.service,
    repair_service: data.repair,
    type: props.type,
  };
  emits("consult", obj);
};
type Props = {
  header: TableHeaderItem[];
  data: TableRowItem[];
  type: string;
};
const props = defineProps<Props>();

// 解决repair文字布局问题
const textLayout = computed(() => {
  return (text: string) => {
    let textArr = text.split(" ");
    if (textArr.length > 1) {
      let lastTextstr = textArr.pop();
      return textArr.join(" ") + "<br/>" + lastTextstr;
    } else {
      return text;
    }
  };
});

// 判断airport类型
const judgeType = computed(() => {
  return (variable: string | string[]) => {
    if (Array.isArray(variable)) {
      return "array";
    } else {
      return "string";
    }
  };
});

// 绑定表格头部样式
const headerLength = props.header.length;
const bindTableHeaderItemStyle = computed(() => {
  return (headerItem: TableHeaderItem, index: number) => {
    let styleArr: string[] = [];
    if (props.data[0].city) {
      styleArr.push("flex-1");
    } else {
      let fixedColumn = [
        headerItem.types ? "" : "col-start",
        index == headerLength - 1 ? "col-end" : "",
        headerItem.types ? "flex-1" : "",
      ];
      styleArr.push(...fixedColumn);
    }
    return styleArr;
  };
});

// 绑定表格内容样式
const bindTableRowItemStyle = computed(() => {
  return (rowItem: TableRowItem, index: number) => {
    let styleArr: string[] = [index % 2 == 1 ? "background" : ""];
    if (rowItem.city) {
      styleArr.push("row-col-flex");
    } else {
    }
    return styleArr;
  };
});

// 绑定滚动

const bindScrollX = () => {
  let tables = document.querySelectorAll(".table");
  tables.forEach((table, index) => {
    if (index !== 1) {
      let scrollRows = table.querySelectorAll(".scroll-x");
      scrollRows.forEach((scrollRow) => {
        scrollRow.addEventListener("scroll", (e) => {
          let dom = e.target as HTMLElement;
          scrollRows.forEach((item) => {
            item.scrollLeft = dom.scrollLeft;
          });
        });
      });
    }
  });
};

onMounted(() => {
  bindScrollX();
});
</script>
<style scoped lang="less"></style>
